<template>
    <h1>用户贷款执行利率计算：</h1>
    <el-row :gutter="20">
      <el-col :span="5"><div class="grid-content ep-bg-purple"></div></el-col>
      <el-col :span="10">
        <el-form :model="form" label-width="120px">
          <el-form-item label="用户名:">
            <el-input ref="user_input" v-model="user.name" />
          </el-form-item>
          <el-form-item label="存款日均余额:">
            <el-input v-model="user.dailyBal" />
          </el-form-item>
          <el-form-item label="所在城市:">
            <el-select v-model="user.city" class="m-2" placeholder="选择" size="large">
              <el-option
                v-for="item in city_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="地址:">
            <el-input v-model="user.addr" />
          </el-form-item>

          <el-form-item label="基准利率(%):">
            <el-select v-model="user.baseIntRate" class="m-2" placeholder="选择" size="large">
              <el-option
                v-for="item in baseRate_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="reset">重新输入</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
          <el-form-item label="浮动点数:">
            <el-input readonly=true v-model="user.floatPoint" />
          </el-form-item>
          <el-form-item label="贷款最终执行利率(%):">
            <el-input  readonly=true v-model="user.intRate" />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="5"><div class="grid-content ep-bg-purple"></div></el-col>
      <el-col :span="20">
      </el-col>
    </el-row>
  </template>
  
  <script>
  /* eslint-disable */
  // 单独引入ElMessageBox
  import { ElMessageBox } from 'element-plus'
  import axios from 'axios'
  import { ref } from 'vue'
 
  export default {
    name: 'login',
    data(){
      return  {
        city_options: [
          {
            value: '北京',
            label: '北京',
          },
          {
            value: '上海',
            label: '上海',
          },
          {
            value: '广州',
            label: '广州',
          },
          {
            value: '深圳',
            label: '深圳',
          },
          {
            value: '贵阳',
            label: '贵阳',
          },
          {
            value: '银川',
            label: '银川',
          },
          {
            value: '拉萨',
            label: '拉萨',
          },
          {
            value: '西宁',
            label: '西宁',
          },
        ],
        baseRate_options: [
          {
            value: '4.35',
            label: '一年以内4.35%',
          },
          {
            value: '4.75',
            label: '一年至五年4.75%',
          },
          {
            value: '4.90',
            label: '五年以上4.90%',
          },
        ],
        user: {
          name: ' ',
          dailyBal: '0.0',
          city: '',
          addr:'',
          baseIntRate:'',
          floatPoint:'0.00',
          intRate:''
        }
      }
    },
    methods: {
      reset(){
        this.user.name = '';
        this.user.dailyBal = 0.0;
        this.user.city = '';
        this.user.addr = '';
        this.user.baseIntRate = '0.00';
        this.user.floatPoint = '';
        this.user.intRate = '';
        this.$nextTick(() => {
          this.$refs.user_input.focus();
        })
      },
      submit() {
        //使用axios进行数据提交
  
          if ( this.user.name == '' ) { 
            alert("用户名没有输入！");
            return;
          }

          if ( this.user.dailyBal < 0.00 || this.user.dailyBal > 100000000.00 ) { 
            alert("输入的存款日均余额不合法！");
            return;            
          }

          if ( this.user.city == '' ) { 
            alert("所在城市没有输入！");
            return;            
          }

          if ( this.user.addr == '' ) { 
            alert("地址没有输入！");
            return;            
          }    

          if ( this.user.interest == '' ) { 
            alert("贷款基准利率没有输入！");
            return;            
          }       

          ElMessageBox.alert('执行成功！', '信息');

          let data = new FormData()

          data.append("username", this.user.name)
          data.append("dailyBal", this.user.dailyBal)
          data.append("city", this.user.city)
          data.append("addr", this.user.addr)
          data.append("baseIntRate", this.user.baseIntRate)
          data.append("floatPoint", "0.00")
          data.append("intRate", "0.00")

          console.log("data:");
          for (var [a, b] of data.entries()) {
            console.log(a, ":", b);
          }

          let that = this.$router; //获取路由对象信息

          axios.post('http://localhost:8001/provider/matchCustom', data,{
            headers: {'Content-Type':'application/json; charset=utf-8'}
            }).then(
               (res) => {
                   console.log("收到回应：");
                   console.log(res);
                   this.user.floatPoint = res.data.floatPoint;
                   this.user.intRate = res.data.intRate.toFixed(4);
               }
          )

      }
    }
  }

  </script>
  
  <style>
  </style>
